<template>
  <div class="layoutContainer">
    <div class="layoutHeader">
      <minHeader :menusStructure="isTeacher() ? state.menusStructure : state.studentMenusStructure" />
    </div>
    <div class="layoutWrapper">
      <StarBackground />
      <div class="layoutContent">
        <div class="content">
					<router-view v-slot="{ Component }">
						<keep-alive>
							<component
								:is="Component"
								:key="route.fullPath"
								v-if="route.meta.keepAlive"
							/>
						</keep-alive>
						<component
							:is="Component"
							:key="route.fullPath"
							v-if="!route.meta.keepAlive"
						/>
					</router-view>
				</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import StarBackground from '@/components/StarBackground.vue'
import minHeader from '@/components/common/minHeader.vue'
import { useRoute, useRouter } from 'vue-router'
import { reactive, ref, watch, h } from 'vue'
import * as antIcons from '@ant-design/icons-vue'
import teacher from '@/router/teacher'
import minMenu from '@/components/common/minMenu.vue'
import { state, isTeacher } from '@/stores/info.js'

const route = useRoute()
const router = useRouter()

const items = reactive(
  teacher[0].children.map((val) => {
    console.log(val, '?')
    return {
      path: val.path,
      label: val.meta.title,
    }
  })
)

const handleMenuClick = (item) => {
  router.push({ path: item.path })
}
</script>

<style lang="scss" scoped>
* {
  box-sizing: border-box;
  min-height: 0;
  min-width: 0;
}
.layoutContainer {
	height: 100%;
	width: 100%;
  display: flex;
  flex-direction: column;
  min-width: 0;
  .layoutHeader {
    width: 100%;
    display: flex;
    justify-content: center;
    background: #fff;
    .header {
      width: $viewMinWidth;
    }
  }
  .layoutWrapper {
		min-height: 0;
		min-width: 0;
		flex: 1;
    position: relative;
    display: flex;
		flex-direction: column;
		align-items: center;
    position: relative;
    .layoutContent {
			flex: 1;
      width: $viewMinWidth;
      display: flex;
			justify-content: space-between;
      .left {
        display: flex;
        flex-direction: column;
				margin: 30px 0;
        .info {
          display: flex;
          align-items: center;
          flex-direction: column;
					margin-bottom: 20px;
          img {
            width: 80px;
          }
        }
        ::v-deep .AIConsulting_agent_container {
          width: 100% !important;
        }
      }
			.content {
				/* background: #fff; */
				border-radius: 8px;
				flex: 1;
				margin: 0px 0 30px 0px;
			}
    }
  }
}
</style>
